import { Button, Col, Drawer, Modal, Row, Steps } from "antd";
import FormRender, { useForm, Error } from "form-render";
import React, { useState } from "react";

const schema = {
  type: 'object',
  properties: {
    sourceType: {
      title: '数据源类型',
      type: 'string',
      enum: ['dameng', 'mysql', 'postgresql', 'kafka', 'elasticsearch'],
      enumNames: ['达梦数据库', 'MySQL', 'PostgreSQL', 'Kafka', 'ElasticSearch'],
    },
    input1: {
      title: '简单输入框',
      type: 'string',
      required: true,
    },
  },
};

const components: any[] = [
  {
    "title": "数据源",
    "description": "配置输入数据源，获取数据",
    "schema": schema,
  },
  {
    "title": "数据提取",
    "description": "将非关系数据转换为关系数据",
    "schema": schema,
  },
  {
    "title": "数据处理",
    "description": "对数据进行过滤、处理和计算",
    "schema": schema,
  },
  {
    "title": "数据映射",
    "description": "对待保存数据并进行名称映射",
    "schema": schema,
  },
  {
    "title": "数据转换",
    "description": "将数据转换为存储要求格式",
    "schema": schema,
  },
  {
    "title": "目标数据源",
    "description": "配置目标数据源，保存数据",
    "schema": schema,
  },
];

const { Step } = Steps;

const Test: React.FC = () => {
  const [currentStep, setCurrentStep] = useState(0);

  const form = useForm();
  const onFinish = (formData: any, errors: Error[]) => {
    console.log('formData:', formData, 'errors', errors);
    if (errors && errors.length) {
      return;
    }
    setCurrentStep(currentStep + 1);
  };

  return (
    <Row gutter={24}>
      <Col push={2} span={20} >
        <Steps current={1} style={{ margin: "16px auto 32px auto" }}>
          <Step title="选择任务模板" />
          <Step title="设置任务参数" />
          <Step title="设置任务调度" />
          <Step title="保存任务配置" />
        </Steps>
      </Col>
      <Col span={8}>
        <Steps current={currentStep} direction="vertical">
          {components.map(comp => <Step title={comp.title} description={comp.description} />)}
        </Steps>
      </Col>
      <Col span={16}>
        <p>
          <h1>{components[currentStep].title}</h1>
          <span>{components[currentStep].description}</span>
        </p>
        <FormRender form={form} schema={components[currentStep].schema} onFinish={onFinish} />
        <Button type="primary" onClick={form.submit}>
          下一步
        </Button>
      </Col>
    </Row>
  );
};

export default Test;
